<template>
    <el-container ref="bigModel" class="main-model">
        <!-- 设备抗社会属性分析-评估页面 -->
        <el-header>
            <Header :active-title="4" />
        </el-header>
        <el-main>
            <div>
                <div class="home-model">
                    <el-row>
                        <el-col :span="leftModelSpan" style="background-color: #113367">
                            <div class="home-model-left">
                                <div style="height:50% ;border-bottom: 3px solid black;">
                                    <indexTree />
                                </div>
                                <div style="height:50%">
                                    <indexTree />
                                </div>
                                <img v-if="rightModelShow" :src="require('@/assets/xd/new/Group 1142813242.png')" alt=""
                                    class="rightJ" @click="hideRightModel">
                                <img v-else :src="require('@/assets/xd/new/Group 1142813263.png')" alt="" class="rightJ"
                                    style="" @click="showRightModel">
                            </div>
                        </el-col>
                        <el-col :span="rightModelSpan">
                            <div class="home-model-right">
                                <div class="infoModel">
                                    <div class="infoTitle flex-container">
                                        归属组织泄露风险统计
                                        <!-- 跳转终端页面 -->
                                        <el-button type="text" @click="showantiAttributive" class="more">
                                            更多
                                        </el-button>
                                    </div>
                                    <div class="infoContent" :style="{ height: infoHeight + 'px' }">
                                        <!-- <div ref="mychart" class="echart" style="width: 100%; height: 100%" /> -->
                                        <piechart />
                                    </div>
                                </div>
                                <div class="infoModel">
                                    <div class="infoTitle flex-container">
                                        归属组织泄露风险告警
                                        <!-- 跳转终端页面 -->
                                        <el-button type="text" @click="showantiAttributive" class="more">
                                            更多
                                        </el-button>
                                    </div>
                                    <div class="infoContent" :style="{ height: infoHeight + 'px' }">
                                        <list-scroll class="box" :speed="0">
                                            <div class="list">
                                                <div class="infoItem1" v-for="(item, index) in infoList" :key="index">
                                                    <div class="_num">
                                                        {{ index + 1 }}
                                                    </div>
                                                    <div class="_cont">
                                                        {{ item.content }}
                                                    </div>
                                                </div>
                                            </div>
                                        </list-scroll>
                                    </div>
                                </div>
                                <div class="infoModel">
                                    <div class="infoTitle flex-container">
                                        归属组织保护任务列表
                                        <!-- 跳转终端页面 -->
                                        <el-button type="text" @click="showantiAttributive" class="more">
                                            更多
                                        </el-button>
                                    </div>
                                    <div class="infoContent" :style="{ height: infoHeight + 'px' }">
                                        <list-scroll class="box" :speed="0">
                                            <div class="list">
                                                <div class="infoItem2" v-for="(item, index) in infoList2" :key="index">
                                                    <div class="_num">
                                                        {{ index + 1 }}
                                                    </div>
                                                    <div class="_cont">
                                                        {{ item.content }}
                                                    </div>
                                                </div>
                                            </div>
                                        </list-scroll>
                                    </div>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </el-main>
    </el-container>
</template>

<script>
// 弹窗为dialog4， 3.5.6
import Header from "@/views/xd/components/Header";
// import indexTree from "@/views/xd/demo/indexTree.vue";
import indexTree from "@/views/xd/components/charts/new/equipmentRelationship.vue";
import ListScroll from "@/components/DtSrcollCopy2";
import piechart from "@/views/xd/components/charts/new/huanxing2.vue";
import * as echarts from 'echarts';

// const toPath = (e) => {
//   console.log(e)
//   router.push({path:'/'+e,query:{id:'1'}});
// };
export default {
    components: { Header, indexTree, ListScroll, piechart },
    data() {
        return {
            rightModelShow: true,
            rightModelSpan: 5,
            leftModelSpan: 19,
            activeIndex: "1",
            activeIndex2: "1",
            formInline: {
                user: "",
                region: "",
            },
            infoList: [
                {
                    content:
                        "253单位，202.197.9.35，泄露风险等级高",
                },
                {
                    content:
                        "253单位，202.197.9.14，泄露风险等级高",
                },
                {
                    content:
                        "896单位，202.197.9.36，泄露风险等级高",
                },
                {
                    content:
                        "836单位，202.197.9.30，泄露风险等级高",
                },
                {
                    content:
                        "852单位，202.197.9.62，泄露风险等级高",
                },
                {
                    content:
                        "825单位，202.197.9.31，泄露风险等级高",
                },
            ],
            infoList2: [
                {
                    content: "262单位，202.197.9.62，归属保护已完成",
                },
                {
                    content: "235单位，202.197.9.62，归属保护已完成70%",
                },
                {
                    content: "274单位，202.197.9.62，归属保护已完成60%",
                },
                {
                    content: "296单位，202.197.9.62，归属保护已完成50%",
                },
                {
                    content: "225单位，202.197.9.62，归属保护已完成40%",
                },
                {
                    content: "277单位，202.197.9.62，归属保护已完成30%",
                },
            ],

            infoHeight: 300,
            // 饼形
            scrollTop: 0,
        };
    },
    mounted() {
        this.infoHeight = (this.$refs.bigModel.$el.offsetHeight - 80) / 3;
        let that = this;
    },
    methods: {
        showantiAttributive() {
            this.$router.push("/networkEquipment/antiAttributive");
        },

        hideRightModel() {
            this.rightModelShow = false;
            this.rightModelSpan = 0;
            this.leftModelSpan = 24;
        },
        showRightModel() {
            this.rightModelShow = true;
            this.rightModelSpan = 5;
            this.leftModelSpan = 19;
        },


        onSubmit() { },
    },
};
</script>
<style lang="scss" scoped>
.home-model-left {
    height: calc(100vh - 70px);
}

.home-model-right {
    border-radius: 5px;
    padding: 5px;

    .infoContent {
        padding-top: 48px;
        box-sizing: border-box;
        overflow: hidden;
    }

    .infoModel {
        position: relative;

        .infoTitle {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 5;
            width: 100%;
            background-image: url(~@/assets/xd/new/title.png);
            background-size: 100% 80%;
            background-repeat: no-repeat;
            color: #fff;
        }

        .infoBody {
            height: 100%;
            padding-top: 48px;
            box-sizing: border-box;
        }
    }
}

.flex-container {
    display: flex;
    justify-content: space-between;
}

.infoItem {
    line-height: 1.3em !important;
    font-size: 21px;
}

.rightJ {
    z-index: 1000;
}

.el-header {
    padding: 0;
    z-index: 5;
}

.more {
    color: #fff;
    font-size: 22px;
    font-weight: bold;
}

// .home-model-search{
//   z-index: 5;
// }</style>
